import {
  priceFilter
} from "@/util/tool"

const extraCssText = "box-shadow: 0 2px 3px #dbdbdb;border: 1px solid #bcc2c4;border-radius: 0;color: black;z-index:100000"


export class mapOption {
  constructor(data) {
    this.tooltip = {
      trigger: 'item',
      formatter: function (params) {
        if (!params.value) {
          params.value = 0;
        }
        return params.name + '<br/>' + params.seriesName + ' : ' + params.value;
      }
    }
    this.visualMap = {
      min: 0,
      max: 100,
      left: 50,
      show: false,
      inRange: {
        color: ['lightskyblue','yellow', 'orangered']
      },
    }
    this.series = data
  }
}
export class mapSerie {
  constructor(data) {
    this.name = 'world';
    this.type = 'map';
    this.mapType = 'world';
    this.itemStyle = {
      emphasis: {
        label: {
          show: true
        }
      }
    }
    this.data = data
  }
}

export class trendBarOption {
  constructor(xData, sData) {
    this.grid = {
      left: '50%'
    }
    this.xAxis = {
      type: 'category',
      data: xData,
      show: false
    };
    this.yAxis = {
      type: 'value',
      show: false
    };
    this.series = sData;
    this.left = 30;
    this.tooltip = {
      formatter: (params, ticket, callback) => {
        return xData[params.seriesIndex] + ':    ' + params.value
      },
      backgroundColor: '#fff',
      extraCssText: extraCssText
    }
  }
}

export class trendBarSerie {
  constructor(data) {
    this.data = data;
    this.barGap = '1%';
    this.barWidth = '99%';
    this.type = 'bar';
  }
}


export class trendLineOption {
  constructor(xData, data, allData, tags) {
    this.tooltip = {
      trigger: 'axis',
      backgroundColor: '#fff',
      extraCssText: extraCssText,
      formatter: (params, ticket, callback) => {
        let axisValue = params[0].axisValue;
        let item = allData.find(item => item.formattedAxisTime === axisValue);
        let tpl = item.formattedTime + '</br>';
        for (let i = 0; i < tags.length; i++) {
          tpl += '<span class="t-left">' + tags[i] + '</span>' + ':' + '<span class="t-right">' + item.value[i] + '</span>' + '</br>'
        }
        tpl = '<div class="t-line">' + tpl + '</div>'
        return tpl
      }
    };
    this.xAxis = {
      type: 'category',
      data: xData
    };
    this.yAxis = {
      type: 'value',
      min: 0,
      max: 100,
    };
    this.legend = {
      show: true,
      top: 10,
      left: 'right'
    }
    this.series = data
    this.grid = {
      left: '5%',
      right: 0
    }
  }
}

export class trendLineSerie {
  constructor(name, data) {
    this.name = name;
    this.data = data;
    this.type = 'line';
    // this.smooth = true;
  }
}



export class lineOption {
  constructor(xData, data, legendData, min, max) {
    this.legend = {
      data: legendData
    };
    this.xAxis = {
      type: 'category',
      data: xData
    };
    this.yAxis = {
      type: 'value',
      name: 'Price ($)',
      min: min,
      max: max,
      nameTextStyle: {
        fontSize: 16,
        textNameOffsetY: 20
      }
    };
    this.series = data
    this.grid = {
      left: '5%',
      right: '5%'
    }
  }
}

export class lineSerie {
  constructor(name, data) {
    this.name = name;
    this.data = data;
    this.type = 'line';
    this.markPoint = {
      data: [{
          type: 'max',
          name: '最高价格'
        },
        {
          type: 'min',
          name: '最低价格'
        }
      ],
      symbolSize: 20,
      label: {
        offset: [0, -20],
        fontSize: 14,
        show: true,
        color: "auto"
      }
    }
    this.markLine = {
      data: [{
        type: 'average',
        name: '平均价格',
        label: {
          fontSize: 14
        }
      }]
    }
  }
}

export class pieOption {
  constructor() {
    this.tooltip = {
      trigger: "item",
      triggerOn: "click",
      show: false,
      extraCssText: 'padding: 0; background-color: #fff;border: 1px solid #red',
      formatter: (params, ticket, callback) => {
        let partId = params.value.id;
        let data = {
          count: 16566,
          products: [{
              img: '../',
              desc: 'Hermes constance </br>mini epsom rubi',
              price: 10630
            }, {
              img: '../',
              desc: 'Hermes constance </br>mini epsom rubi',
              price: 10630
            },
            {
              img: '../',
              desc: 'Fendi constance </br>mini epsom rubi',
              price: 10630
            }
          ]
        };
        let products = data.products;

        function render(tpl, obj) {
          for (let i in obj) {
            let reg = new RegExp("{{" + i + "}}")
            tpl = tpl.replace(reg, priceFilter(obj[i]))
          }
          return tpl
        }
        let header = "<div class='header'>{{count}} products</div>";
        header = render(header, {
          'count': data.count
        });
        let productList = "<div class='product-list'>"
        let product = "<div class='product'>"
        let left = "<div class='left'>"
        let img = "<img src='{{img}}'></div>"
        let right = "<div class='right'><div class='desc'>{{desc}}</div><div class='price'>Sale: <span class='num'> ${{price}}</span></div></div>"
        let tail = "</div>";
        let str = ""
        product = product + left + img + right + tail;
        for (let i = 0; i < products.length; i++) {
          str += render(product, {
            img: products[i].img,
            desc: products[i].desc,
            price: priceFilter(products[i].price)
          })
        }
        product = product + left + img + right;
        return "<div class='tooltip-wrap' >" + header + productList + str + "</div>";
      },
    }
    this.legend = {
      type: "scroll",
      show: true,
      orient: "vertical",
      x: "center",
      y: "65%",
      data: [

      ],
      textStyle: {
        fontFamily: 'Courier New',
        fontSize: 12,
      }
    }
    this.dataset = {
      source: []
    }
    this.title = {
      show: true,
      text: "",
      subtext: "",
      left: "center",
      top: "5%",
      textStyle: {
        color: "black",
        fontSize: 18,
        height: 100,
        align: "center",
        width: 2000
      },
      subtextStyle: {
        align: "center",
        width: "100%"
      },
      itemGap: 16
    }
    this.series = []
    this.id = ''
    this.fid = ''
    this.ffid = ''
    this.chartStyle = ''
    this.group = ''
    this.split = ''
    this.filter = ''
    // this.color= ['#abe861', '#8b8de9', '#ffd279', 'f093f6', '#379cf8', '#fe8081', '#33d6c5', '#ff9e7c', '#68cef8', '#fe70af', '#72ee5a']
  }
}

export class pieSerie {
  constructor(itemColor) {
    this.name = "";
    this.type = "pie";
    this.center = ["50%", "40%"];
    this.radius = ["20%", '40%'];
    this.label = {
      show: false
    }
    this.labelLine = {
      show: false
    }
    this.itemStyle = {
      color: itemColor,
    }
  }
}

export class barOption {
  constructor() {
    this.tooltip = {
      trigger: "item",
    };
    this.xAxis = [{
      type: 'category',
    }];
    this.yAxis = {}
    this.grid = {
      left: '1%',
      top: '20%',
      right: '1%',
      bottom: '5%',
      containLabel: true
    };
    this.legend = {
      data: [],
    };
    this.dataset = {
      source: []
    }
    this.series = []
    this.title = {
      show: true,
      text: "",
      subtext: "",
      left: 0,
      top: 0,
      textStyle: {
        color: "black",
        fontSize: 18,
        height: 100,
        align: "center",
        width: 2000
      },
      subtextStyle: {
        align: "center",
        width: "100%"
      },
      itemGap: 16
    }
  }
}

export class barSerie {
  constructor() {
    this.type = "bar";
  }
}

export class boxplotOption {
  constructor(origin, groupData) {
    this.type = "boxplot";
    this.xAxis = {
      type: 'category',
      data: origin[0].axisData,
      boundaryGap: true,
      nameGap: 40,
      splitLine: {
        show: false
      },
      splitArea: {
        show: true,
        areaStyle: {}
      },
      axisLabel: {
        formatter: function (value) {
          return groupData[value]
        },
        fontSize: 20
      },
    };
    this.yAxis = {
      type: 'value',
      name: 'Price ($)',
      nameTextStyle: {
        fontSize: 16
      },
      splitArea: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {}
      }
    };
    this.grid = {
      left: '1%',
      top: '15%',
      right: '1%',
      bottom: '5%',
      containLabel: true
    };
    this.dataZoom = [{
      show: true,
      height: 20,
      type: 'slider',
      top: '97%',
      xAxisIndex: [0],
      start: 0,
      end: 30,
      zoomLock: true,
      throttle: 200,
      rangMode: [1],
    }];
    this.title = {
      show: true,
      text: "Pricing",
      subtext: "",
      left: 0,
      top: 0,
      textStyle: {
        color: "black",
        fontSize: 18,
        height: 100,
        align: "center",
        width: 2000
      },
      subtextStyle: {
        align: "center",
        width: "100%"
      },
      itemGap: 16
    }
    // this.color = ['#379cf8', '#fe8081', '#33d6c5', '#abe861', '#8b8de9', '#ffd279', 'f093f6', '#ff9e7c', '#68cef8', '#fe70af', '#72ee5a'];
    this.legend = {
      x: '60%',
      data: [

      ],
    }
    this.series = []

  }
  formatter(param) {
    return [
      'Experiment ' + param.name + ': ',
      'upper: ' + param.data[0],
      'Q1: ' + param.data[1],
      'median: ' + param.data[2],
      'Q3: ' + param.data[3],
      'lower: ' + param.data[4]
    ].join('<br/>')
  }
}

export class boxSerie {
  constructor(index, data, legendData, bgColor) {
    this.type = "boxplot";
    this.name = legendData[index];
    this.data = data;
    this.itemStyle = {
      color: 'transparent',
      borderWidth: 2,
    }
    this.tooltip = {
      formatter: this.formatter
    }
  }
  formatter(param) {
    return [
      'Experiment ' + param.name + ': ',
      'upper: ' + param.data[0],
      'Q1: ' + param.data[1],
      'median: ' + param.data[2],
      'Q3: ' + param.data[3],
      'lower: ' + param.data[4]
    ].join('<br/>')
  }
}
